<template>
  <el-dialog
    v-model="showImageUploadDialogFlag"
    title="图片上传"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="60%"
    align-center
  >
    <el-upload
      ref="upload"
      class="upload-demo"
      :http-request="saveImageUpload"
      list-type="picture"
      multiple="true"
      :show-file-list="false"
      :accept="PictureFormat"
      :before-upload="beforeAvatarUpload"
    >
      <el-button type="primary">点击上传</el-button>
      <div class="el-upload__tip">
        支持格式：{{ PictureFormat }}，图片大小不超过{{ PictureSize }}M
      </div>
    </el-upload>
    <div style="margin-top: 10px">
      <el-card v-for="(item, index) in imageList" :key="index" class="box-card">
        <div class="text-item">
          <svg-icon class="icon-card" icon-class="el-remove" @click="removeImage(index)" /><i
            class="el-icon-remove avatar-uploader-icon"
          ></i>
          <div class="demo-image__error">
            <div class="block">
              <el-form label-width="80px" label-position="right">
                <el-form-item label="名称" required>
                  <el-input v-model="item.name" />
                </el-form-item>
                <el-form-item label="关键字">
                  <el-input v-model="item.keywords" />
                </el-form-item>
                <el-form-item label="图片分类">
                  <el-select v-model="item.classify" placeholder="请选择图片分类">
                    <el-option
                      v-for="item in classifyList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="标签">
                  <el-input v-model="item.labels" />
                </el-form-item>
              </el-form>
            </div>
            <div class="block">
              <el-image :src="item.previewUrl" />
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="defineImageUpload">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import * as resourceApi from '@/api/resource'
import { PictureFormat, PictureSize } from '@/utils/config'
import type { UploadProps } from 'element-plus'
import { defineComponent, ref } from 'vue'
import * as pictureApi from '@/api/picture'

const imageList = ref([])

const showImageUploadDialogFlag = ref(false)

const saveImageUpload = async (content) => {
  let form = new FormData()
  form.append('file', content.file)
  const data = await resourceApi.uploadImage(form)
  imageList.value.push(data.data)
}

//上传前验证文件大小
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  let size = Number(PictureSize)
  if (rawFile.size / 1024 / 1024 > Number(PictureSize)) {
    ElMessage.error('Avatar picture size can not exceed ' + size + 'MB!')
    return false
  }
  return true
}

const defineImageUpload = () => {
  resourceApi.saveImageList(imageList.value)
  showImageUploadDialogFlag.value = false
  getList()
  imageList.value = []
}
const classifyList = ref([])
const getClassify = async () => {
  const data = await pictureApi.getPictureClassify()
  classifyList.value = data
}
const openImageUpload = () => {
  showImageUploadDialogFlag.value = true
  getClassify()
}

defineExpose({
  openImageUpload
})

const getList: any = inject('getList')
</script>

<style lang="scss" scoped>
.body {
  margin: 0;
}

.box-card {
  position: relative;
  padding: 0.05rem 2%;
  margin-top: 5px;
  border: 1px solid #e0e0e0;
}

.text-item {
  overflow: hidden;
}

.box-card .icon-card {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  line-height: 0.2rem;
  cursor: pointer;
}

.demo-image__error .block {
  display: inline-block;
  width: 49%;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}

.demo-image__error .demonstration {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
  max-width: 300px;
  max-height: 200px;
  padding: 0 5px;
}

.demo-image__error .image-slot {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 30px;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color-light);
  justify-content: center;
  align-items: center;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.image-list .block {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}

.image-list .block:last-child {
  border-right: none;
}

.image-list .demonstration {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
</style>
